import React, { Component } from 'react';
import PubSub from 'pubsub-js';
import axios from 'axios';

class Search extends Component {
    search = () => {
        // Search组件发布消息

        // const {keyWordNode:{value}} = this; 嵌套解构
        // const {value: keyword} = this.keyWordNode; 解构的重命名
        const { keyWordNode: {value: keyword }} = this; //结合
        
        // 按下搜索时, 更改List的状态
        PubSub.publish('updateList', {isWelcome: false, isLoading: true});

        // 发送网络请求, 请求地址:https://api.github.com/search/users?q=xxx
        // 需要avatar_url头像 html_url主页地址 login用户名
        axios.get(`https://api.github.com/search/users?q=${keyword}`).then(
            response => {
                // 请求成功后, List更新状态
                PubSub.publish('updateList', {isLoading: false, users: response.data.items});
            },
            error => { 
                PubSub.publish('updateList', {isLoading: false, err: error.message});
             }
        );

    }
    render() {
        return (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">Search Github Users</h3><br />
                <div>
                    <input ref={c => this.keyWordNode = c} type="text" placeholder='Enter the name you search' />
                    <button onClick={this.search}>Search</button>
                </div>
            </section>
        );
    }
}

export default Search;